<!--
texterea 组件
props：
placeholder: 提示语
v-model：
该输入框的值，双向绑定
-->
<template>
  <textarea :placeholder="placeholder" :value="value" @input="$emit('input', $event.target.value)" :class="{'show':show}" @focus="focus()" @blur="blur()" cols="30" rows="10"></textarea>
</template>
<style lang="less" scoped>
@import url('../../style/mixin.less');
@import url('./theme.less');
    textarea{
        width: calc(100% - 20px);
        border: none;
        height: 30px;
        margin: 0 10px;
        border: 1px solid @texterea-border-color;
        border-radius: @texterea-border-radius;
        text-indent: 10px;
        color: @texterea-font-color;
        .placeholder;
        .transition(.3s);
        &.show{
          height: 80px;;
        }
    }
</style>
<script>
export default {
  data(){
    return{
      show:false
    }
  },
  props:{
    placeholder:{
      default: '请输入...'
    },
    value:{}
  },
  methods:{
    focus(){
      this.show=true;
    },
    blur(){
      this.show=false;
    }
  }
}
</script>
